<template>
	<view class="editUser">
		<comHead :title="$t('grzx.bjzl')" :isLeft="true" :isRight="false"></comHead>
		<view class="userIcon">
			<image :src="getImg(userinfo.avatar)" mode="aspectFill"></image>
			<text @click="bindAvatarChange">{{$t('grzx.ghtx')}}</text>
		</view>
		<view class="list">
			<view class="item" @click="popFun(userinfo.nickname,$t('grzx.nc'),'editName')">
				<view class="l">
					<text>{{$t('grzx.nc')}}</text>
				</view>
				<view class="m">
					<text>{{userinfo.nickname}}</text>
				</view>
				<view class="r">
					<image src="https://siha.vxmeng.com/static/index/right.png" mode="widthFix"></image>
				</view>
			</view>
			<picker @change="bindPickerChange" :value="index" :range="array">
				<view class="item">
					<view class="l">
						<text>{{$t('grzx.xb')}}</text>
					</view>
					<view class="m">
						<text>{{array[index]}}</text>
					</view>
					<view class="r">
						<image src="https://siha.vxmeng.com/static/index/right.png" mode="widthFix"></image>
					</view>
				</view>
			</picker>
			<picker mode="date" :value="date" @change="bindDateChange">
				<view class="item">
					<view class="l">
						<text>{{$t('grzx.sr')}}</text>
					</view>
					<view class="m">
						<text>{{date}}</text>
					</view>
					<view class="r">
						<image src="https://siha.vxmeng.com/static/index/right.png" mode="widthFix"></image>
					</view>
				</view>
			</picker>
			<view class="item" @click="popFun(userinfo.bio,$t('grzx.qm'),'editSign')">
				<view class="l">
					<text>{{$t('grzx.qm')}}</text>
				</view>
				<view class="m">
					<text>{{userinfo.bio}}</text>
				</view>
				<view class="r">
					<image src="https://siha.vxmeng.com/static/index/right.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<comPop @hidePop="popObj.isPop=false" :type="popObj.type" :title="popObj.title" @sendPopFun="sendPopFun"
			:isInput="popObj.isInput" v-if="popObj.isPop"></comPop>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				userinfo: {},
				date: currentDate,
				array: [this.$t('grzx.nan'), this.$t('grzx.nv')],
				index: 0,
				popObj: {
					value: "",
					title: "",
					isPop: false,
					isInput: false,
					type: ''
				},
			}
		},
		onShow() {
			this.getUserinfo()
			console.log(uni.getLocale());
			this.messageFun('getAuth')
		},
		methods: {
			async getUserinfo() {
				const res = await this.$myRequest({
					url: 'api/user/index',
					method: 'GET',
					data: {}
				})
				if (res.code == 1) {
					console.log(res)
					this.userinfo = res.data
					this.index = res.data.gender
					this.date = res.data.birthday
				}
			},
			bindAvatarChange() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed', 'original'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						uni.uploadFile({
							// url: 'https://siha.vxmeng.com/api/common/upload',
							url: 'https://siha.vxmeng.com/api/common/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								token: uni.getStorageSync('token') ? uni.getStorageSync('token') : ""
							},
							success: (uploadFileRes) => {
								// console.log(uploadFileRes.data);
								this.userinfo.avatar = JSON.parse(uploadFileRes.data).data.url
								this.save('avatar', this.userinfo.avatar)
							},
							fail: (uploadErr) => {
								console.error('上传失败', uploadErr);
							}
						});
					},
					fail: (err) => {
						console.error('选择图片失败', err);
					}
				});
			},
			bindPickerChange: function(e) {
				// console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = +e.detail.value
				if(this.index == 0){
					this.save('gender', `"0"`)
				}else{
					this.save('gender', this.index+'')
				}
			},
			bindDateChange(e) {
				this.date = e.detail.value
				this.save('birthday',this.date)
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//点击确定后触发
			sendPopFun(e) {
				console.log(e);
				if (e.type === 'editSign') {
					this.userinfo.bio = e.value
					this.save('bio', this.userinfo.bio)
				} else if (e.type === 'editName') {
					this.userinfo.nickname = e.value
					this.save('nickname', this.userinfo.nickname)
				}
				this.$tools.showTx(this.$t('common.czcg'))
				this.popObj.isPop = false
			},
			//点击选项弹出
			popFun(value, title, type) {
				this.popObj = {
					value: value,
					title: title,
					isPop: true,
					isInput: true,
					type: type
				}
			},
			async save(attr, val) {
				const res = await this.$myRequest({
					url: 'api/user/profile',
					data: {
						[attr]: val
					}
				});
				console.log(res);
				if(res.code==1){
					this.getUserinfo()
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.editUser {
		height: 100vh;


		.userIcon {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding: 30rpx 0;
			// background: radial-gradient(circle at center, rgb(31, 31, 31) 0%, rgb(38, 48, 38) 60%, rgb(24, 29, 14) 100%);

			image {
				width: 144rpx;
				height: 144rpx;
				border-radius: 50%;
			}

			text {
				display: inline-flex;
				background: linear-gradient(270deg, #5F58FD 0%, #62B6FC 100%);
				padding: 10rpx 20rpx;
				border-radius: 30rpx;
				font-size: 26rpx;
				color: #fff;
				margin-top: 30rpx;
				opacity: .7;
			}
		}

		.list {
			box-sizing: border-box;

			picker-view {
				background-color: black;
			}

			.item {
				padding: 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.l {
					color: #fff;
					font-size: 32rpx;
					width: 25%;
				}

				.m {
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					width: 70%;

					text {
						color: #fff;
						font-size: 32rpx;

						&:nth-child(2) {
							color: rgba(#fff, 0.5);
							font-size: 24rpx;
							margin-top: 20rpx;
						}
					}
				}

				.r {
					image {
						width: 30rpx;
					}
				}
			}
		}
	}
</style>